<%--
  Created by IntelliJ IDEA.
  User: 15890741124
  Date: 2022/9/5
  Time: 21:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FPA结果展示</title>
    <style>
        html,
        body {
            color: pink;
            background: rgba(2, 2, 1, 0.93);
            margin: 0;
            padding: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        /* Demo Buttons Style */
        .codrops-demos {
            font-size: 0.8em;
            text-align: center;
            position: absolute;
            z-index: 99;
            width: 96%;
        }

        .codrops-demos a {
            display: inline-block;
            margin: 0.35em 0.1em;
            padding: 0.5em 1.2em;
            outline: none;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            border-radius: 2px;
            font-size: 110%;
            border: 2px solid transparent;
            color: #fff;
        }

        .codrops-demos a:hover,
        .codrops-demos a.current-demo {
            border-color: #383a3c;
        }

        /*form表单*/
        .layui-form {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            height: 700px;
            max-height: 700px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, 0.11);
            font-size: 16px;
            border: red;
            overflow: auto;
        }

        .contain {
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, 0.11);
            font-size: 16px;
            overflow: hidden;
        }

        .topic {
            text-align: center;
            color: #ffffff;
            font-size: 25px;
            font-weight: normal;
        }

        .my-form-item {
            margin: 25px -50px;
            background-color: rgba(0, 0, 0, 0);
        }

        .my-input {
            border-radius: 45px;
            width: 300px;
            height: 40px;
            font-size: 15px;
            color: white;
            background-color: rgba(255, 255, 255, 0);
            border: rgba(255, 255, 255, 0.2) 2px solid;
            text-align: center;
        }

        .mine-input {
            border-radius: 45px;
            width: 300px;
            height: 40px;
            font-size: 15px;
            border: rgba(0, 0, 0, 0.5) 2px solid;
            text-align: center;
        }

        .layui-btn {
            border-radius: 45px;
            width: 300px;
            height: 40px;
            font-size: 15px;
            color: white;
            background-color: rgba(0, 0, 0, 0);
            border: rgba(255, 255, 255, 0.2) 2px solid;
        }
        .font-set{
            font-size: 13px;
            text-decoration: none;
            margin-left: 100px;
            color: white;
        }

        /*a:hover{*/
        /*    text-decoration: underline;*/
        /*}*/
        @media screen and (max-device-width: 600px) {

            .container {
                width: 100%;
                margin-left: 0;
                margin-right: 0;

            }

            .my-form-item {
                margin: 25px -100px;
                background-color: rgba(0, 0, 0, 0);
            }
        }

         #show {
             /*border: 4px solid cornflowerblue;*/
             margin: 0 auto;
             font-family: 华文行楷;
             font-size: 30px;
             /*绝对定位也行，但是父也不占位。包含块布局的时候一般父相对  父相子绝*/
         }

        #bb {
            width: 200px;
            height: 80px;
            color: pink;
            margin:10px auto;
            line-height: 80px;
        }

    </style>
</head>
<body>

<canvas width="1536" height="754"></canvas>

<div class="container">
    <input type="hidden" id="type" name="type" value="${view.type}">
    <input name="testerId" id="testerId" type="hidden" value="${testerId}">

    <div id="show" style="width: 70%;height: 60% ">
        <div id="bb">FPA测试结果</div>
        <div style="width: 50%;height: 350px;color: pink; margin: auto;background-color: rgba(0,0,0,0.2)" id="shopping"></div>
        <div style="width: 100%;margin: auto;" id="explain"></div>
    </div>
</div>


<script>
    layui.config({
        version: 1,
        base: '${pageContext.request.contextPath}/js/' //这个就是你放Echart.js的目录
    })
    layui.use(['form', 'layer', 'jquery'], function() {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        $.ajax({
            url: "${pageContext.request.contextPath}/view/queryResult.do",
            //响应的数据类型
            dataType: "JSON",
            type: "POST",
            data:{
                type: $("#type").val(),
                id:$("#testerId").val()
            }
            //异步请求
            // async: true,
            //成功的回调
            , success: function (data) {
                if (data.code == 0) {
                    var body = data.data.body,
                        redCount=data.data.redCount,
                        yellowCount=data.data.yellowCount,
                        blueCount=data.data.blueCount,
                        greenCount=data.data.greenCount;
                    var myChart = echarts.init(document.getElementById('shopping'));

                    var option = {
                        title: {
                            text: 'Referer of a Website',
                            subtext: 'Fake Data',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [{
                            //饼图
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: redCount, name: '红色性格'},
                                {value: yellowCount, name: '黄色性格'},
                                {value: blueCount, name: '蓝色性格'},
                                {value: greenCount, name: '绿色性格'},
                            ],
                            itemStyle: {
                                normal: {//柱子颜色
                                    color: function (colors) {
                                        var colorList = [
                                            '#dc4242',
                                            '#e3e84c',
                                            '#4c67d2',
                                            '#69d54e',
                                            '#945FCF'];
                                        return colorList[colors.dataIndex];
                                    }

                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }

                            }
                        }]
                    };
                    myChart.setOption(option);
                    /*let total =  body+ study+people+loneliness +remorse+allergies+terror+impulsion;*/
                    var htmlStr = "";
                    if (redCount > yellowCount && redCount > blueCount && redCount > greenCount) {
                        htmlStr += "<div>" +
                            "<h1 align='center'>测评报告预览</h1>"+
                           " <p align='center'>您的性格是红色性格</p>"+
                         "   <p align='center'>积极乐观 情绪波动大起大落</p>"+
                           " <p align='center'>真诚主动 开玩笑不分场合</p>"+
                           " <p align='center'>善于表达 疏于兑现承诺</p>"+
                          "  <p align='center'>富有感染力 这山望着那山高</p>"+
                         "   <p >【性格优势】</p>"+
                           " <p >作为个体</p>"+
                          "  <p >高度乐观的积极心态。喜欢自己，也容易接纳别人。把生命当作值得享受的经验。喜欢新鲜、变化和刺激。经常开心，追求快乐。情感丰富而外露。自由自在，不受拘束。喜欢开玩笑和调侃。别出心裁，与众不同。表现力强。容易受到人们的喜欢和欢迎。生动活泼，好奇心强。</p>"+
                            "<p >沟通特点</p>"+
                            "<p >才思敏捷，善于表达。喜欢通过肢体上的接触传达亲密情感。容易与人攀谈。发生冲突时，能直接表白。人越多越亢奋。演讲和舞台表演的高手。乐于表达自己的看法。</p>"+
                            "<p >作为朋友</p>"+
                            "<p >真诚主动，热情洋溢。喜欢交友，善于与陌生人互动。擅长搞笑，是带来乐趣的伙伴。容易原谅自己和别人，不记仇。富有个人魅力。乐于助人。有错就认，很快道歉。喜欢接受别人的肯定和不吝赞美。</p>"+
                            "<p >对待工作和事业</p>"+
                            "<p>工作主动，寻找新任务。富有感染力，能够吸引他人参与。激发团队的热情合作心和进取心，重视团队合作的感觉。令人愉悦的工作伙伴。完成短期目标时，极富爆发力。信任他人。善于赞美和鼓励，是天生的激励者。不喜欢太多的规定束缚，富有创意。工作以活泼化、丰富化的方式进行。反应快，闪电般开始。</p>"+
                          "  <p >【性格过当】</p>"+
                           " <p >作为个体</p>"+
                           " <p> 情绪波动大起大落。变化无常，随意性强。鲁莽冲动，轻信他人，容易上当受骗。虚荣心强，不肯吃苦，贪图享受。喜欢走捷径，虎头蛇尾，不能坚持。粗心大意，杂乱无章。不肯承担责任，期待有别人为自己的人生负责。缺乏自控，毫无纪律。容易原谅自己，不吸取教训。不稳定和散漫。拒绝长大。借放纵来麻痹自己的痛苦和烦恼，而不去认真思考生命的本质。</p>"+
                            "<p >沟通特点</p>"+
                           " <p >说话少经大脑思考，脱口而出。对于严肃和敏感的事情也会开玩笑。炫耀自己，夺人话题。注意力分散，不能专注倾听，插话。吹牛不打草稿，疏于兑现承诺。忘记别人说过什么，自己讲过的话也经常重复。口无遮拦，不保守秘密。不可靠，光说不练。夸大吹嘘自己的成功。</p>"+
                            "<p >作为朋友</p>"+
                            "<p >缺少分寸，过度的玩笑和热情。只想当主角。谈论自己感兴趣的话题，对和自己无关的话题心不在焉。插嘴打断别人谈话。健忘多变。经常会忘记老朋友。有极强的依赖性，脆弱而不能独立。好心办坏事。</p>"+
                            "<p >对待工作和事业</p>"+
                           " <p>跳槽频率高，这山望着那山高。没有规划，随意性强。没有焦点，把精力分散在太多的不同方向。过高估计了自己的能力。觉得没有必要为未来做准备。不肯花更大的精力和幕后工作的勤奋代价，来获取更高的殊荣。不切实际地希望所有的工作都要有趣味。很难全神贯注，经常性地走神。异想天开，难以预料。</p>"+
                        "</div>"
                    }
                    if ( yellowCount >redCount  && yellowCount >blueCount && yellowCount > greenCount) {
                        htmlStr += "<div>" +
                            "<h1 align='center'>测评报告预览</h1>"+
                            " <p align='center'>您的性格是黄色性格</p>"+
                            "   <p align='center' >行动迅速 死不认错</p>"+
                            " <p align='center'>不感情用事 咄咄逼人</p>"+
                            " <p align='center'>坚持不懈 容易发怒</p>"+
                            "   <p >【性格优势】</p>"+
                            " <p >作为个体</p>"+
                            "  <p >不达目标，誓不罢休。不停地给自己设定目标以推动前进。把生命当成竞赛。行动迅速，活力充沛。意志坚强。自信、不情绪化，而且非常有活力。坦率，直截了当，一针见血。强烈的进取心，居安思危。独立性强。有强烈的求胜欲。不畏强权并敢于冒险。不易气馁，不在乎外界的评价，坚持自己所选择的道路和方向。危难时刻挺身而出。讲究速度和效率。敢于接受挑战并渴望成功。</p>"+
                            "<p >沟通特点</p>"+
                            "<p >以务实的方式主导会谈。喜欢主导整个事情进行的方式。能够直接抓住问题的本质。说话用字简明扼要，不喜欢拐弯抹角。不受情绪干扰和控制。</p>"+
                            "<p >作为朋友</p>"+
                            "<p >给予解决问题的方法，而非纠缠在过去。迅速提出忠告和方向。直言不讳地提出建议。</p>"+
                            "<p >对待工作和事业</p>"+
                            "<p>动作干净利落，讲求效率。能够承担长期高强度的压力。强烈的目标趋向，善于设定目标。高瞻远瞩，有全局观念。善于委派工作。坚持不懈，促成活动。掌握重点执行。行事作风明快。天生的领导者和富有组织能力。竞争越强，精力越旺，愈挫愈勇。寻求实际的解决方法。以结果和完成任务为导向，并且高效率。善于快速决策并处理所遇到的一切问题。富有责任感。</p>"+
                            "  <p >【性格过当】</p>"+
                            " <p >作为个体</p>"+
                            " <p> 自己永远是对的，死不认错。趾高气扬，霸道。只关注自己的感受，不体贴别人的心情和想法。以自我为中心，自私倾向。霸道。脾气暴躁，容易发怒。缺少同情心。傲慢自大，目中无人。经常紧绷自己的情绪。在情绪不佳或有压力的时候，经常会不可理喻与独断专行。不喜欢受群体所规范约束,打破既定规则且自己不遵守规则。</p>"+
                            "<p >沟通特点</p>"+
                            " <p >喜欢争辩和冲突。铁石心肠，对情绪表现冷淡。粗线条，简单粗暴。毫无敏感，无力洞察他人内心和理解他人所想。抗拒批评，严酷且自以为是的审判者。缺乏亲密分享的能力。缺乏耐心，是非常糟糕的倾听者。态度尖锐严厉，批判性强。容易让他人的工作或生活步调紧张。不习惯赞美别人。说话有时咄咄逼人。控制欲强。不太能体谅他人，对行事模式不同的人缺少包容度。</p>"+
                            "<p >作为朋友</p>"+
                            "<p >大多时候仅保持理性的友谊。讨厌与犹豫不决、能力弱的人互动。试图控制和影响大家的活动，希望他人服从自己而非配合别人。除了工作内容，很少交谈其它话题。情感上习惯与人保持一定的距离。很少对人流露出直接诚挚的关怀。需要你的时候才找你。为别人做主。</p>"+
                            "<p >对待工作和事业</p>"+
                            " <p>生活在无尽的工作当中而不是人群中。数量远比质量重要。目标没有完成时，容易发怒且迁怒于人。寻求更多的权力，有极强的控制欲。拒绝为自己和他人放松。完成工作第一，人的事情第二。为了自己的面子，不妥协且毫不认错。对于竞争结果过分关注而忽略过程中的乐趣。武断，刚愎自用且一意孤行。很难慢下来，缺少生命乐趣的工作狂。未明察就急于改变，急于求成。</p>"+
                            "</div>"                    }
                    if (blueCount >redCount  && blueCount >yellowCount && blueCount > greenCount){
                        htmlStr += "<div >" +
                            "< align='center'>测评报告预览</h1>"+
                            " <p align='center'>您的性格是蓝色性格</p>"+
                            "   <p align='center'>思想深邃 情感脆弱</p>"+
                            " <p align='center'>敏感而细腻 不主动与人沟通</p>"+
                            "  <p align='center'>计划性强 患得患失</p>"+
                            "   <p >【性格优势】</p>"+
                            " <p >作为个体</p>"+
                            "  <p >严肃的生活哲学。思想深邃，独立思考而不盲目从众。沉默寡言，老成持重。注重承诺，可靠安全。谨慎而深藏不露。坚守原则，责任心强。遵守规则，井井有条。深沉有目标的理想主义。敏感细腻。高标准，追求完美。谦和稳健。善于分析，富有条理。待人忠诚，富有自我牺牲精神。深思熟虑，三思而后行。坚韧执着。</p>"+
                            "<p >沟通特点</p>"+
                            "<p >享受敏感而有深度的交流。设身处地地体会他人。能记住谈话时共鸣的感情和思想。喜欢小群体交流的思想碰撞。关注谈话的细节。</p>"+
                            "<p >作为朋友</p>"+
                            "<p >默默地为他人付出以表示关切和爱。对友谊忠诚不渝。真诚关怀朋友的境遇，善于体贴他人。能够记得特殊的日子。遭遇难关时，极力给予鼓舞安慰。很少向他人表达内心的看法。经常扮演解决分析问题的角色。</p>"+
                            "<p >对待工作和事业</p>"+
                            "<p>强调制度、程序、规范、细节和流程。做事之前首先计划且严格按照计划去执行。喜欢探究及根据事实行事。尽忠职守，追求卓越。高度自律。喜欢用表格、数字的管理来验证效果。注重承诺。一丝不苟地执行工作。</p>"+
                            "  <p >【性格过当】</p>"+
                            " <p >作为个体</p>"+
                            " <p> 高度负面的情绪化。猜忌心重，不信任他人。太在意别人的看法和评价，容易被负面评价中伤。容易沮丧，悲观消极。陷于低落的情绪无法自拔。情感脆弱抑郁，有自怜倾向。杞人忧天，庸人自扰。最容易的抑郁症患者。当别人轻易成功时，会因自己的努力付出却不如他人而心生嫉妒。过于阴沉的面孔，让人感觉压抑，不易接近。</p>"+
                            "<p >沟通特点</p>"+
                            " <p >不知不觉地说教和上纲上线。原则性强，不易妥协。强烈期待别人具有敏感度和深度能够理解自己。以为别人能够读懂自己的心思。不太主动与人沟通。不喜欢制造困扰麻烦给别人，也讨厌别人制造困扰麻烦给自己。要真诚开放心胸与人互动会比较难。习惯以防卫的状态面对别人。</p>"+
                            "<p >作为朋友</p>"+
                            "<p >过度敏感，有时很难相处。强烈的不安全感。远离人群。喜好批判和挑剔。吝于宽恕。经常怀疑别人的话，不容易相信他人。</p>"+
                            "<p >对待工作和事业</p>"+
                            " <p>对待工作和事业对自己和他人常寄予过高而且不切实际的期望。过度计划和过度绸缪。患得患失，行动缓慢。较真，挑剔他人及自己的表现。专注于小细节，因小失大。吝啬表扬，强烈的形式主义。容易被不理想的成绩击垮斗志。墨守成规，死板教条不懂变通。为了维护原则缺乏妥协精神。</p>"+
                            "</div>"                    }
                    if (greenCount >redCount  && greenCount >yellowCount && greenCount > blueCount){
                        htmlStr += "<div>" +
                            "<h1 align='center'>测评报告预览</h1>"+
                            " <p align='center'>您的性格是绿色性格</p>"+
                            "   <p align='center' >温柔祥和 拒绝改变</p>"+
                            " <p align='center'>为他人考虑 胆小被动</p>"+
                            " <p align='center'>心平气和 没有主见</p>"+
                            "  <p align='center'>善于协调 缺乏创意</p>"+
                            "   <p >【性格优势】</p>"+
                            " <p >作为个体</p>"+
                            "  <p >爱静不爱动，有温柔祥和的吸引力和宁静愉悦的气质。和善的天性，做人厚道。追求人际关系的和谐。奉行中庸之道，为人稳定低调。遇事以不变应万变，镇定自若。知足常乐，心态轻松。追求平淡的幸福生活。有松弛感，能融入所有的环境和场合。从不发火，温和、谦和、平和三和一体。做人懂得“得饶人处且饶人”。追求简单随意的生活方式。</p>"+
                            "<p >沟通特点</p>"+
                            "<p >以柔克刚，不战而屈人之兵。避免冲突，注重双赢。心平气和且慢条斯理。善于接纳他意见。最佳的倾听者，极具耐心。擅长让别人感觉舒适。有自然和不经意的冷幽默。松弛大度，不急不徐。</p>"+
                            "<p >作为朋友</p>"+
                            "<p >从无攻击性。富有同情和关心。宽恕他人对自己的伤害。能接纳所有不同性格的人。和善的天性及圆滑的手腕。对友情的要求不严苛。处处为别人考虑，不吝付出。与之相处轻松自然又没有压力。最佳的垃圾宣泄处，鼓励他们的朋友多谈自己。从不尝试去改变他人。</p>"+
                            "<p >对待工作和事业</p>"+
                            "<p>高超的协调人际关系的能力。善于从容地面对压力。巧妙地化解冲突。能超脱游离政治斗争之外，没有敌人。缓步前进以取得思考空间。注重人本管理。推崇一种员工都积极参与的工作环境。尊重员工的独立性，从而博得人心和凝聚力。善于为别人着想。以团体为导向。创造稳定性。用自然低调的行事手法处理事务。</p>"+
                            "  <p >【性格过当】</p>"+
                            " <p >作为个体</p>"+
                            " <p> 按照惯性来做事，拒绝改变，对于外界变化置若罔闻。懒洋洋的作风，原谅自己的不思进取。懦弱胆小，纵容别人欺压自己。期待事情会自动解决，完全守望被动。得过且过。无原则地妥协，而无法促使他们采取负责任的解决态度。逃避问题与冲突。太在意别人反应，不敢表达自己的立场和原则。</p>"+
                            "<p >沟通特点</p>"+
                            " <p >一拳打在棉花上，毫无反应。没有主见，把压力和负担通通转嫁到他人身上。不会拒绝他人，给自己和他人都带来无穷麻烦。行动迟钝，慢慢腾腾。避免承担责任。一拳打在棉花上，毫无反应。没有主见，把压力和负担通通转嫁到他人身上。不会拒绝他人，给自己和他人都带来无穷麻烦。行动迟钝，慢慢腾腾。避免承担责任。</p>"+
                            "<p >作为朋友</p>"+
                            "<p >不负责任的和稀泥。姑息养奸的态度。压抑自己的感受以迁就别人。期待让人人满意，对自己的内心不忠诚。没有自我，迷失人生的方向。缺乏激情。漠不关心，惰于参与任何活动。</p>"+
                            "<p >对待工作和事业</p>"+
                            " <p安于现状，不思进取。乐于平庸，缺乏创意。害怕冒风险，缺乏自信。拖拖拉拉。缺少目标。缺乏自觉性。懒惰而不进取。宁愿做旁观者不肯做参与者。</p>"+
                            "</div>"                    }

                    $("#explain").html(htmlStr);
                }
                layer.msg(data.msg);
            }
        });




    });

    $(function() {
        var canvas = document.querySelector('canvas'),
            ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        ctx.lineWidth = .3;
        ctx.strokeStyle = (new Color(150)).style;

        var mousePosition = {
            x: 30 * canvas.width / 100,
            y: 30 * canvas.height / 100
        };

        var dots = {
            nb: 750,
            distance: 50,
            d_radius: 100,
            array: []
        };

        function colorValue(min) {
            return Math.floor(Math.random() * 255 + min);
        }

        function createColorStyle(r, g, b) {
            return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
        }

        function mixComponents(comp1, weight1, comp2, weight2) {
            return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
        }

        function averageColorStyles(dot1, dot2) {
            var color1 = dot1.color,
                color2 = dot2.color;

            var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
                g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
                b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
            return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
        }

        function Color(min) {
            min = min || 0;
            this.r = colorValue(min);
            this.g = colorValue(min);
            this.b = colorValue(min);
            this.style = createColorStyle(this.r, this.g, this.b);
        }

        function Dot() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;

            this.vx = -.5 + Math.random();
            this.vy = -.5 + Math.random();

            this.radius = Math.random() * 2;

            this.color = new Color();

        }

        Dot.prototype = {
            draw: function() {
                ctx.beginPath();
                ctx.fillStyle = this.color.style;
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fill();
            }
        };

        function createDots() {
            for (i = 0; i < dots.nb; i++) {
                dots.array.push(new Dot());
            }
        }

        function moveDots() {
            for (i = 0; i < dots.nb; i++) {

                var dot = dots.array[i];

                if (dot.y < 0 || dot.y > canvas.height) {
                    dot.vx = dot.vx;
                    dot.vy = -dot.vy;
                } else if (dot.x < 0 || dot.x > canvas.width) {
                    dot.vx = -dot.vx;
                    dot.vy = dot.vy;
                }
                dot.x += dot.vx;
                dot.y += dot.vy;
            }
        }

        function connectDots() {
            for (i = 0; i < dots.nb; i++) {
                for (j = 0; j < dots.nb; j++) {
                    i_dot = dots.array[i];
                    j_dot = dots.array[j];

                    if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x -
                        j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
                        if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots
                            .d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition
                            .y) > -dots.d_radius) {
                            ctx.beginPath();
                            ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
                            ctx.moveTo(i_dot.x, i_dot.y);
                            ctx.lineTo(j_dot.x, j_dot.y);
                            ctx.stroke();
                            ctx.closePath();
                        }
                    }
                }
            }
        }

        function drawDots() {
            for (i = 0; i < dots.nb; i++) {
                var dot = dots.array[i];
                dot.draw();
            }
        }

        function animateDots() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            moveDots();
            connectDots();
            drawDots();

            requestAnimationFrame(animateDots);
        }

        $('canvas').on('mousemove', function(e) {
            mousePosition.x = e.pageX;
            mousePosition.y = e.pageY;
        });

        $('canvas').on('mouseleave', function(e) {
            mousePosition.x = canvas.width / 2;
            mousePosition.y = canvas.height / 2;
        });

        createDots();
        requestAnimationFrame(animateDots);
    });
</script>


</body>
</html>
